✨ 해당 이슈 번호 ✨

#423

todo

• query key - query key factory로 마이그레이션
• 해당 query key들을 사용하는 invalidQueries 부분 수정

📌 내가 알게 된 부분

자세한 부분이 더 궁금하시면 해당 링크를 확인해주세요!

원래의 mile 서비스는 다음과 같이 각 페이지 폴더 내에 커스텀훅을 모아두는 페이지 상단에 객체로 키를 정의해두었습니다.

“커스텀훅을 사용해서 관심사를 분리하고, 객체 키를 사용해서 오타나 중복 등의 휴먼에러를 줄인다.” 라는 접근으로 키를 구성하였지만 한가지 놓친 부분은 쿼리키의 hierarchy 구조를 잘 활용하지 못하는 방향으로 구성되어있었습니다. 이로인해 쿼리키를 invalid할때 관련된 여러 쿼리를 invalid하는데에 어려움이 있고, 다른 페이지에서 사용하는 쿼리키는 여전히 중복될 수 있다는 문제를 가지고 있었습니다.

query key 중복을 막기 위해 전역적으로 key를 관리해야하는가? no!
두괄식으로 말하자면 Query key를 /src/utils/queryKeys.ts 에 전역적으로 저장하는 것은 권장하는 방법이 아닙니다. 이는 공동 배치(colocation)의 이점을 잃는 것입니다.
키를 전역으로 관리했을 때 아래와 같은 부분에서 문제가 발생할 수 있습니다. (자세한 내용은 노션 링크를 첨부하겠습니다.)

• 유지 관리성
• 적용 가능성
• 사용 편의성

제가 query key 리팩토링을 고려한 부분은 아래와 같습니다. 아래 4개의 고려사항을 생각하며 query key factories를 사용해서 문제를 해결해나가보겠습니다.

1. 중복되지 않는 키
2. 배열로 위계가 잡힌 키 (효율적인 invalid를 위해)
3. 쉽게 파악할 수 있는 키 구조
4. 공동배치 (colocation)

위 이미지와 같이 쿼리키 위계를 잡아 아래와 같이 리팩토링하여 키를 관리합니다. 이러한 방법은@lukemorales/query-key-factory 라는 라이브러리를 사용해서도 구현할 수 있지만 key의 위계를 확실히하고 중복을 막자 라는 현재 목적에 맞게 라이브러리 사용없이 구현했습니다. 이는 추후 라이브러리의 장단점을 조금 확인해보고 도입할 예정입니다!

export const groupQueryKey = {
  all: ['group'],
  info: () => [...groupQueryKey.all, 'info'],
  detail: (groupId: string) => [...groupQueryKey.info(), 'detail', groupId],
  auth: (groupId: string) => [...groupQueryKey.info(), 'auth', groupId],
  isPublic: (groupId: string) => [...groupQueryKey.info(), 'public', groupId],
  topics: (groupId: string) => [...groupQueryKey.all, 'topic', groupId],
  topic: (groupId: string) => [...groupQueryKey.topics(groupId), 'todayTopic'],
  posts: (topicId: string, groupId: string) => [...groupQueryKey.topics(groupId), 'posts', topicId],
  curiousPosts: (groupId: string) => [...groupQueryKey.info(), 'curiousPosts', groupId],
  curiousWriters: (groupId: string) => [...groupQueryKey.info(), 'curiousWriter', groupId],

  user: () => [...groupQueryKey.all, 'user'],
  userName: (groupId: string) => [...groupQueryKey.user(), 'userName', groupId],
  userInfo: (writerNameId: number | undefined) => [
    ...groupQueryKey.user(),
    'userInfo',
    writerNameId,
  ],
  userGroups: () => [...groupQueryKey.user(), 'groups'],
};

📌 질문할 부분

Q. 왜 일반적인 배열 형태가 아닌 [...groupQueryKey.all, 'info'] 함수형식 () => [...groupQueryKey.all, 'info']으로 선언하나요?
A. 일반적으로 groupQueryKey를 정의하는 객체 내에서 ...groupQueryKey.all에 접근할 수 없기 때문이다.

위와 같이 함수형식으로 정의하고 함수가 실행될 때는 groupQueryKey가 이미 정의된 상태이므로 에러가 발생하지 않는다. (객체 내부 속성값으로 함수를 선언하면 함수는 정의시점이 아닌 실행시점에 평가됨)

Q. as const를 왜 사용해야하나요?
A. const assertion을 사용해서 보다 단순 문자열이 아닌 구체적인 타입을 지정하게 할 수 있습니다.

객체나 배열에서는 읽기 전용(read only)로 변경하고 타입의 범위를 좁힐 수 있습니다.
이러한 특징으로 현재의 쿼리키들이 단순히 string 배열이 아닌 각자의 타입의 범위로 좁힐 수 있습니다.

📌스크린샷(선택)